<script>
/**
 * 大屏主页面
 * 采用缩放的形式进行适配，搭配rem的话很方便实用
 *  */
import {
    defineComponent,
    ref,
    getCurrentInstance,
    reactive,
    toRef,
    computed,
    onMounted,
    onActivated,
    watch,
    onBeforeUnmount,
} from 'vue';
import ViewHead from './components/viewHead.vue';
import img_1 from './assets/bg.png';
import img_2 from './assets/1-1-bg.png';
import left_1 from './components/left_1.vue';
import left_2 from './components/left_2.vue';
import left_3 from './components/left_3.vue';
import right_1 from './components/right_1.vue';
import right_2 from './components/right_2.vue';
import right_3 from './components/right_3.vue';
import right_4 from './components/right_4.vue';
import center_1 from './components/center_1.vue';
// import Box_5 from './components/box_5.vue';
import { setRem } from '@/common/rem.js';
import api from '@/http/public.js';
import { number } from 'echarts';
export default defineComponent({
    name: 'BigScreenView',
    components: {
        ViewHead,

        left_1,
        left_2,
        left_3,

        right_1,
        right_2,
        right_3,
        right_4,
        center_1

    },
    setup() {
        const listsXdate = [
            '0:00', '0:15', '0:30', '0:45',
            '1:00', '1:15', '1:30', '1:45',
            '2:00', '2:15', '2:30', '2:45',
            '3:00', '3:15', '3:30', '3:45',
            '4:00', '4:15', '4:30', '4:45',
            '5:00', '5:15', '5:30', '5:45',
            '6:00', '6:15', '6:30', '6:45',
            '7:00', '7:15', '7:30', '7:45',
            '8:00', '8:15', '8:30', '8:45',
            '9:00', '9:15', '9:30', '9:45',
            '10:00', '10:15', '10:30', '10:45',
            '11:00', '11:15', '11:30', '11:45',
            '12:00', '12:15', '12:30', '12:45',
            '13:00', '13:15', '13:30', '13:45',
            '14:00', '14:15', '14:30', '14:45',
            '15:00', '15:15', '15:30', '15:45',
            '16:00', '16:15', '16:30', '16:45',
            '17:00', '17:15', '17:30', '17:45',
            '18:00', '18:15', '18:30', '18:45',
            '19:00', '19:15', '19:30', '19:45',
            '20:00', '20:15', '20:30', '20:45',
            '21:00', '21:15', '21:30', '21:45',
            '22:00', '22:15', '22:30', '22:45',
            '23:00', '23:15', '23:30', '23:45',
        ]
        const ViewRef = ref(null);
        const valueAll = ref({})
        const dataContainer = reactive({
            loading: false,
            leftOne: [],
            img: {
                img_1,
                img_2,
            },
            options: [{ name: '24h', value: 1 }, { name: '4h', value: 2 }, { name: '15min', value: 3 }],
            opValue1: 1,
            opValue2: 1,
            opValue3: 1,
        });
        const dataInfo = ref({
            color: ['#4cdbfe', '#99ffbb', '#ffe274',],
            name: ['提前24h', '提前4h', '提前15min'],
            xData: listsXdate,
            data: [],
            showAllSymbol: false,
            emphasis: {
                focus: 'series'
            },
        })
        const dataInfo2 = ref({
            color: ['#4cdbfe', '#99ffbb', '#ffe274',],
            name: ['提前24h', '提前4h', '提前15min'],
            xData: listsXdate,
            data: [],
            showAllSymbol: false,
            emphasis: {
                focus: 'series'
            },
        })
        const dataInfo3 = ref({
            color: ['#4cdbfe', '#99ffbb', '#ffe274',],
            name: ['提前24h', '提前4h', '提前15min'],
            xData: listsXdate,
            data: [],
            showAllSymbol: false,
            emphasis: {
                focus: 'series'
            },
        })
        const rightOne = ref([])
        const rightTwo = ref([])
        const rightThree = ref([])
        const rightFour = ref([])
        const centerOne = ref({})
        const housMin = ref('')
        const indexTime = ref(0)

        /** 是否是文档上 */
        function isActive() {
            if (!ViewRef.value) return false;
            return ViewRef.value.getRootNode() === document;
        }
        /**
         * 计算rem
         *  */
        function computeRem() {
            if (!ViewRef.value) return;
            if (!isActive) return;
            let rect = ViewRef.value.getBoundingClientRect();
            let baseSize = 16; //基础大小，1倍率相当于1rem = 16像素
            let scale = rect.width / 1920;
            let fontSize = Math.round(baseSize * scale * 100) / 100 + 'px';
            /**
             * 计算缩放倍数 1920 * 1080
             * 根据设计图自己配置
             *  */
            setRem(fontSize);
        }
        function generateTimePoints() {
            const timePoints = [];
            for (let hour = 0; hour < 24; hour++) {
                for (let minute = 0; minute < 60; minute += 15) {
                    let hourStr = hour < 10 ? `0${hour}` : `${hour}`;
                    let minuteStr = minute < 10 ? `0${minute}` : `${minute}`;
                    timePoints.push(`${dataContainer.times} ${hourStr}:${minuteStr}`);
                }
            }
            return timePoints;
        }
        function requestFullscreensss(element) {
            console.log(1111111)
            if (element.requestFullscreen) {
                element.requestFullscreen();
            } else if (element.mozRequestFullScreen) { // Firefox
                element.mozRequestFullScreen();
            } else if (element.webkitRequestFullscreen) { // Chrome, Safari and Opera
                element.webkitRequestFullscreen();
            } else if (element.msRequestFullscreen) { // IE/Edge
                element.msRequestFullscreen();
            }
        }
        onMounted(() => {
            // computeRem();
            getData()


            // 调用函数，将某个元素设置为全屏
            const element = document.querySelector('.big-screen-view');

            // setTimeout(() => {
            //     requestFullscreensss(element);
            // }, 3000);
        });
        function getData() {
            const newTime = new Date()
            dataContainer.times = newTime.getFullYear() + '-' + String(newTime.getMonth() + 1).padStart(2, '0') + '-' + String(newTime.getDate()).padStart(2, '0')
            housMin.value = String(newTime.getHours()).padStart(2, '0') + ':' + String(newTime.getMinutes()).padStart(2, '0')
            generateTimePoints().forEach((v, index) => {
                if (new Date(v).getTime() < new Date(`${dataContainer.times} ${housMin.value}`).getTime()) {
                    // console.log(v, index, '1111111111111111111111111111111111111')
                    indexTime.value = index
                }
            })

            api.getShow1({
                code: 'show_2',
                dat: {
                    cod2: 'total',
                    q: ''
                }, q: dataContainer.times
            }).then(res => {
                
                api.getShow1({
                    code: 'show_2',
                    dat: {
                        cod2: 'total2'
                    }, q: dataContainer.times
                }).then(resTwo => {
                    
                    res.dat.total[1] = resTwo.dat.total[0]
                    res.dat.total[2] = resTwo.dat.total[1]
                    dataContainer.leftOne = res.dat.total
                })
            })
            api.getShow1({
                code: 'show_2',
                dat: {
                    cod2: 'ut'
                }, q: dataContainer.times
            }).then(res => {
                res.dat.ut.forEach(v => {
                    if (Array.isArray(v)) {
                        v.forEach(k => {
                            k = k.toFixed(2)
                        })
                    }
                })

            })
            // api.getShow1({
            //     code: 'show_2',
            //     dat: {
            //         cod2: 'dat'
            //     }, q: dataContainer.times
            // }).then(res => {
            //     valueAll.value = res.dat

            // })
            api.getShow1({
                code: 'show_2',
                dat: {
                    cod2: 'tdy'
                }, q: dataContainer.times
            }).then(res => {
                rightOne.value = res.dat.tdy

            })
            api.getShow1({
                code: 'show_2',
                dat: {
                    cod2: 'ut'
                }, q: dataContainer.times
            }).then(res => {
                rightTwo.value = res.dat.ut

            })

            api.getShow1({
                code: 'show_2',
                dat: {
                    cod2: 'kpi'
                }, q: dataContainer.times
            }).then(res => {

                rightThree.value = res.dat.kpi

            })
            api.getShow1({
                code: 'show_2',
                dat: {
                    cod2: 'w'
                }, q: dataContainer.times
            }).then(res => {
                rightFour.value = Array.isArray(res.dat.w) ? res.dat.w : []

            })
            api.getShow1({
                code: 'show_2',
                dat: {
                    cod2: 'cap',
                    q: ''
                },
            }).then(res => {
                centerOne.value.left = res.dat.cap

            })
            api.getShow1({
                code: 'show_2',
                dat: {
                    cod2: 'cap2',
                    q: ''
                }, q: dataContainer.times
            }).then(res => {
                // centerOne.value = { left: res.dat.cap, right: res.dat.cap2 }
                centerOne.value.right = res.dat.cap2

            })
            api.getShow1({
                code: 'show_2',
                dat: {
                    cod2: 'p1'
                }, q: dataContainer.times
            }).then(res => {
                // centerOne.value = { left: res.dat.cap, right: res.dat.cap2 }
                dataInfo.value.data = []
                // dataInfo.value.data.push(valueAll.value.p1[0])
                const listOnes = []
                console.log(res.dat.p1)
                valueAll.value.p1 = res.dat.p1
                valueAll.value.p1[0].forEach(v => {
                    v = v.toFixed(2)
                    for (let i = 0; i < 4; i++) {
                        listOnes.push(v)
                    }
                })
                dataInfo.value.data.push(listOnes)
                const list = []
                valueAll.value.p1[1].forEach((v, index) => {
                    v = v.toFixed(2)
                    if (index >= indexTime.value && index <= indexTime.value + 15) {

                        list.push(v)
                    } else {
                        list.push(0)
                    }
                })
                dataInfo.value.data.push(list)
                const listTwo = []
                valueAll.value.p1[2].forEach((v, index) => {
                    v = v.toFixed(2)
                    if (index == indexTime.value) {
                        listTwo.push(v)
                    } else {
                        listTwo.push(0)
                    }
                })
                dataInfo.value.data.push(listTwo)
            })
            api.getShow1({
                code: 'show_2',
                dat: {
                    cod2: 'p2'
                }, q: dataContainer.times
            }).then(res => {
                // centerOne.value = { left: res.dat.cap, right: res.dat.cap2 }
                valueAll.value.p2 = res.dat.p2
                dataInfo2.value.data = []
                // dataInfo.value.data.push(valueAll.value.p1[0])
                const listOnes = []
                valueAll.value.p2[0].forEach(v => {
                    v = v.toFixed(2)
                    for (let i = 0; i < 4; i++) {
                        listOnes.push(v)
                    }
                })
                dataInfo2.value.data.push(listOnes)
                const list = []
                valueAll.value.p2[1].forEach((v, index) => {
                    v = v.toFixed(2)
                    if (index >= indexTime.value && index <= indexTime.value + 15) {

                        list.push(v)
                    } else {
                        list.push(0)
                    }
                })
                dataInfo2.value.data.push(list)
                const listTwo = []
                valueAll.value.p2[2].forEach((v, index) => {
                    v = v.toFixed(2)
                    if (index == indexTime.value) {
                        listTwo.push(v)
                    } else {
                        listTwo.push(0)
                    }
                })
                dataInfo2.value.data.push(listTwo)


            })
            api.getShow1({
                code: 'show_2',
                dat: {
                    cod2: 'p3'
                }, q: dataContainer.times
            }).then(res => {
                valueAll.value.p3 = res.dat.p3
                dataInfo3.value.data = []
                // dataInfo.value.data.push(valueAll.value.p1[0])
                const listOnes = []
                valueAll.value.p3[0].forEach(v => {
                    v = v.toFixed(2)
                    for (let i = 0; i < 4; i++) {
                        listOnes.push(v)
                    }

                })
                dataInfo3.value.data.push(listOnes)
                const list = []
                valueAll.value.p3[1].forEach((v, index) => {
                    v = v.toFixed(2)
                    if (index >= indexTime.value && index <= indexTime.value + 15) {

                        list.push(v)
                    } else {
                        list.push(0)
                    }
                })
                dataInfo3.value.data.push(list)
                const listTwo = []
                valueAll.value.p3[2].forEach((v, index) => {
                    v = v.toFixed(2)
                    if (index == indexTime.value) {
                        listTwo.push(v)
                    } else {
                        listTwo.push(0)
                    }
                })
                dataInfo3.value.data.push(listTwo)


            })
        }

        let timer = setInterval(() => {
            computeRem();
            getData()
            // console.log(1)
        }, 900000);
        window.addEventListener('resize', computeRem);
        onBeforeUnmount(() => {
            window.removeEventListener('resize', computeRem);
            window.clearInterval(timer);
        });

        return {
            dataContainer,
            ViewRef,
            dataInfo,
            dataInfo2,
            dataInfo3,
            rightOne,
            rightTwo,
            rightThree,
            rightFour,
            centerOne
        };
    },
});
</script>

<template>
    <el-scrollbar height="100vh">
        <div ref="ViewRef" class="big-screen-view" :style="{
            '--bg-img-1': `url(${dataContainer.img.img_1})`,
            '--bg-img-2': `url(${dataContainer.img.img_2})`,
        }">
            <div class="head">
                <ViewHead title="多能互补一体化调控平台">
                    <template #left>
                        <div class="yun-img">
                            <!-- <img src="@/assets/img-show2/yun.png" alt=""> -->
                            <!-- <span class="temp">多云</span> -->
                            <span class="numberC">驾驶舱</span>
                            <!-- <span class="cs">&nbsp; ℃</span> -->
                        </div>
                    </template>
                    <template #right>
                        <div class="right-box">
                            <div class="right-box-item-title">{{ dataContainer.times }}</div>

                        </div>
                    </template>
                </ViewHead>
            </div>
            <div class="content">
                <div class="content">
                    <div class="left">
                        <div class="box" style="height: 16rem;">
                            <div class="title">当前电站整体指标</div>
                            <left_1 :dataInfo="dataContainer.leftOne"></left_1>
                        </div>
                        <div class="box" style="height: 14rem;overflow: auto;">
                            <div class="title">
                                <span>风力发电预测</span>

                            </div>
                            <!-- <div style="height: 3.125rem;background-color: red;width: 12.500rem;color: #fff;overflow-x: auto;">
                                <div style="width: 125.000rem;background-color: aqua;">11111</div>
                            </div> -->
                            <brokenline v-if="dataInfo.data.length" :dataInfo="dataInfo"></brokenline>
                        </div>
                        <div class="box" style="height: 14rem;overflow: hidden;">
                            <div class="title">
                                <span>光伏发电预测</span>

                            </div>
                            <brokenline :dataInfo="dataInfo2"></brokenline>
                        </div>
                        <div class="box" style="height: 14rem;overflow: hidden;">
                            <div class="title">
                                <span>光热发电预测</span>
                            </div>
                            <brokenline :dataInfo="dataInfo3"></brokenline>
                        </div>

                    </div>
                    <div class="center_zhong">
                        <div class="box" style="height: 20rem;overflow: hidden;">
                            <div class="title"> &nbsp;&nbsp;储能信息</div>
                            <center_1 :dataInfo="centerOne"></center_1>
                        </div>
                    </div>
                    <div class="right">
                        <div class="box" style="height: 16rem;">
                            <div class="title">当日电站监测信息</div>
                            <right_1 :dataInfo="rightOne"></right_1>
                        </div>
                        <div class="box" style="height: 14rem;overflow: hidden;">
                            <div class="title">各类别利用/运行小时数</div>
                            <right_2 :dataInfo="rightTwo"></right_2>
                        </div>
                        <div class="box" style="height: 14rem;overflow: hidden;">
                            <div class="title">社会贡献值指标</div>
                            <right_3 :dataInfo="rightThree"></right_3>
                        </div>
                        <div class="box" style="height: 14rem;overflow: hidden;">
                            <div class="title">今日实时告警</div>
                            <right_4 :dataInfo="rightFour"></right_4>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </el-scrollbar>
</template>

<style lang="scss" scoped>
::v-deep {
    .el-select .el-input__wrapper {
        background: none;
    }
}

::v-deep .el-input__inner {
    color: #fff;
}

::-webkit-scrollbar {
    width: 1.250rem;
    /* 滚动条宽度 */
}

/* 滚动条轨道 */
::-webkit-scrollbar-track {
    background: #f1f1f1;
    /* 轨道背景颜色 */
}

/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
    background: red;
    /* 滑块背景颜色 */
    border-radius: 0.313rem;
    /* 滑块圆角 */
}

/* 滚动条滑块悬停时的样式 */
::-webkit-scrollbar-thumb:hover {
    background: #555;
    /* 悬停时的背景颜色 */
}

.big-screen-view {
    /** 保持宽高比 */
    width: 100vw;
    height: calc(100vw / calc(1920 / 1080));
    overflow: hidden;
    // background-color: #031045c7;
    display: flex;
    flex-direction: column;
    background-image: url('@/assets/img-show2/backs.jpg');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;

    >.head {
        height: 5.688rem;

        .yun-img {
            img {
                width: 2.250rem;
                height: 1.938rem;
            }

            .temp {
                color: #D8D8D8;
                font-size: 0.75rem;
            }

            .numberC {
                font-size: 1.5rem;
            }

            .cs {
                font-size: 1.125rem;
                font-weight: 200;
            }
        }

        .right-box-item-title {
            font-weight: 300;
        }

    }

    >.content {
        display: flex;
        flex-direction: column;
        // flex: 1 1 0;
        width: 100%;
        height: 0;

        >.top {
            width: 100%;
            height: 12.438rem;
        }

        >.content {
            display: flex;
            flex-direction: row;
            justify-content: space-between;

            width: 100%;
            // height: 0;
            padding: 0 0.938rem 0.938rem 0.938rem;
            box-sizing: border-box;

            >.left,
            >.right,
            .center_zhong {
                display: flex;
                flex-direction: column;


                >.box {
                    // width: 100%;
                    // flex: 1 1 auto;
                    overflow: scroll;
                    /* 确保元素有滚动条 */
                    height: 16.875rem;
                    background-image: url('@/assets/img-show2/borderBack.png');
                    background-repeat: no-repeat;
                    background-size: 100% 100%;
                    background-position: center;
                    margin: 0 0 0.938rem 0;

                    >.title {
                        color: #FFFFFF;
                        font-size: 1rem;
                        padding-left: 1rem;
                        background: url('@/assets/img-show2/smallTitle.png');
                        background-repeat: no-repeat;
                        background-size: 100% 100%;
                        background-position: center;
                        height: 1.875rem;
                        line-height: 1.875rem;
                        display: flex;
                        justify-content: space-between;
                    }

                    &:last-child {
                        margin: 0;
                    }
                }

                .box::-webkit-scrollbar {
                    width: 0.625rem;
                }

                .box::-webkit-scrollbar-track {
                    background: #f1f1f1;
                }

                .box::-webkit-scrollbar-thumb {
                    background: #888;
                    border-radius: 0.313rem;
                }

                .box::-webkit-scrollbar-thumb:hover {
                    background: #555;
                }
            }

            >.left {
                height: 100%;
                width: 30rem;
                overflow: scroll;
            }

            >.right {
                height: 100%;
                width: 30rem;
                overflow: scroll;
            }

            .center_zhong {
                overflow: scroll;
                width: 55.625rem;
                // margin-top: 43.000rem;
                // margin-top: 31.250rem;
                padding: 0 1.250rem;
                flex-direction: column-reverse;
                // position: absolute;
                // bottom: 1.250rem;
                // left: 50%;
                // transform: translateX(-50%);
            }
        }
    }
}
</style>
